<template>
	<view class="home" style="color: #333">
		<view class="data-panel">
			<u-navbar :placeholder="true" bgColor="#FDC31D">
				<view slot="left" style="color: #fff">{{ store.storeName }}</view>
			</u-navbar>
			<view class="card">
				<view class="title">
					<image src="@/static/images/tabbar/manage.png" alt="" />
					经营概况
				</view>
				<view class="operate-list" style="justify-content: space-between">
					<view class="item" style="">
						<text>{{ homeData.businessOverview[0].title }}</text>
						<text class="mt-20 info">{{ homeData.businessOverview[0].value ? homeData.businessOverview[0].value : '0.00' }}</text>
					</view>
					<view class="item">
						<text>{{ homeData.businessOverview[1].title }}</text>
						<text class="mt-20 info">{{ homeData.businessOverview[1].value ? homeData.businessOverview[1].value : '0.00' }}</text>
					</view>
				</view>
				<view class="operate-list" style="justify-content: space-between">
					<view class="item" style="">
						<text>{{ homeData.businessOverview[2].title }}</text>
						<text class="mt-20 info">{{ homeData.businessOverview[2].value ? homeData.businessOverview[2].value : '0.00' }}</text>
					</view>
					<view class="item">
						<text>{{ homeData.businessOverview[3].title }}</text>
						<text class="mt-20 info">{{ homeData.businessOverview[3].value ? homeData.businessOverview[3].value : '0.00' }}</text>
					</view>
				</view>

				<view class="operate-list">
					<view class="item" v-for="(im, ix) in homeData.businessOverview.slice(4, 10)" :key="ix">
						<text>{{ im.title }}</text>
						<text class="mt-20">{{ im.value }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="card" style="margin-top: 14px">
			<view class="title">
				<image src="@/static/images/tabbar/desk.png" alt="" />
				开台概况
			</view>
			<view class="operate-list" style="justify-content: space-between; padding: 30rpx 84rpx; box-sizing: border-box">
				<view class="item" style="">
					<text>{{ homeData.businessOverview[8].title }}</text>
					<text class="mt-20">{{ homeData.businessOverview[8].value }}</text>
				</view>
				<view class="item">
					<text>{{ homeData.businessOverview[9].title }}</text>
					<text class="mt-20">{{ homeData.businessOverview[9].value }}</text>
				</view>
			</view>
			<view class="operate-list" style="justify-content: space-between; padding: 0 84rpx 30rpx; box-sizing: border-boxs">
				<view class="item" style="">
					<text>{{ homeData.businessOverview[10].title }}</text>
					<text class="mt-20">{{ homeData.businessOverview[10].value }}</text>
				</view>
				<view class="item">
					<text>{{ homeData.businessOverview[11].title }}</text>
					<text class="mt-20">{{ homeData.businessOverview[11].value }}</text>
				</view>
			</view>
		</view>

		<view class="card mt-20" style="margin-top: 14px">
			<view class="title">
				<image src="@/static/images/tabbar/core.png" alt="" />
				核心数据
			</view>
			<view class="data-list">
				<view class="item" v-for="(im, ix) in homeData.coreData.slice(0, 2)" :key="ix" style="text-align: center">
					<view class="item-info" v-if="im.title">
						<view>{{ im.title }}</view>
						<view>{{ im.value }}</view>
					</view>
					<view class="item-info" v-if="im.preTitle">
						<view>{{ im.preTitle }}</view>
						<view>{{ im.preValue }}</view>
					</view>
					<view class="item-info" v-if="im.qoqTitle">
						<view>{{ im.qoqTitle }}</view>
						<view>{{ im.qoqValue }}</view>
					</view>
				</view>
			</view>
			<view class="hr" v-if="homeData.coreData[2].title"></view>
			<view class="p-c">
				<view v-if="homeData.coreData[2].title" class="i">
					<view class="l">
						<image src="@/static/images/tabbar/percentage.png" alt="" />
						{{ homeData.coreData[2].title }}
					</view>
					<view class="r">{{ homeData.coreData[2].value }}</view>
				</view>
				<view v-if="homeData.coreData[2].preTitle" class="i">
					<view class="l">
						<image src="@/static/images/tabbar/percentage.png" alt="" />
						{{ homeData.coreData[2].preTitle }}
					</view>
					<view class="r">{{ homeData.coreData[2].preValue }}</view>
				</view>
				<view v-if="homeData.coreData[2].qoqTitle" class="i">
					<view class="l">
						<image src="@/static/images/tabbar/percentage.png" alt="" />
						{{ homeData.coreData[2].qoqTitle }}
					</view>
					<view class="r">{{ homeData.coreData[2].qoqValue }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			homeData: {
				businessOverview: [],
				coreData: []
			}
		};
	},
	onShow() {
		console.log('onShow');
		this.getHomeData();
	},
	computed: {
		...mapState(['store'])
	},
	methods: {
		getHomeData() {
			this.$api
				.GetStoreStatistic({
					isBoss: true
				})
				.then((res) => {
					this.homeData = res.data;
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.data-panel {
	background-image: linear-gradient(#fdc31d, #f8f8f8);
}
.card {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 10rpx;
	width: 710rpx;
	margin: auto;
	.title {
		font-weight: 600;
		padding: 10rpx 0 10rpx 10rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #dddcdc;
		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
	}
	.operate-list {
		padding-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
		justify-content: center;
		align-items: center;
		.item {
			height: 130rpx;
			width: 33.3%;
			padding: 20rpx 0;
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			text-align: center;
			.info {
				border-bottom: 4rpx solid #fdc31d;
				padding-bottom: 10rpx;
				color: #fdc31d;
				margin-top: 20rpx;
			}
		}
	}
	.data-list {
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx 20rpx 10rpx;
		.item {
			font-size: 28rpx;
			flex: 1;
			border-radius: 10rpx;
			// background-color: #f8f8f8;
			white-space: nowrap;
			margin-bottom: 10rpx;
			padding: 5px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.item-info {
				padding: 20rpx 0;
				box-sizing: border-box;
				height: 130rpx;
				display: flex;
				text-align: center;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}
	.hr {
		margin: 10rpx auto;
		width: 70%;
		height: 2rpx;
		background-color: #c3c3c3;
	}
	.p-c {
		margin-top: 20rpx;
		.i {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 10rpx 10rpx 30rpx;
			font-size: 28rpx;
			.l {
				flex: 2;
				display: flex;
				align-items: center;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}
			}
			.r {
				flex: 1;
				text-align: center;
			}
		}
	}
}
</style>
